<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
                 #body1
                {   
                   animation-name: move1;
                   animation-duration: 60s;
		  animation-iteration-count: infinite;
                }
                @keyframes move1 {
			0% {background-image: url("static/images/bj1.jpg");}
			30% {background-image: url("static/images/bj2.jpg");}
			60% {background-image: url("static/images/bj3.jpg");}
			100% {background-image: url("static/images/bj4.jpg");}

		}
        </style>

    
    </head>
    <body id="body1">
         
        <table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <th width="120" height="20"  valign="middle" bgcolor="#66FF00">
                    <h3>丛林勇者</h3>
                </th>
            <tr>
            <tr>
                <th width="120" height="20"  valign="middle" >
                    <div style="float:left">
            <div style="float:right">
                <audio controls loop>
                   <source src="../../resources/music/02.mp3" type="audio/mpeg"  >
                </audio> 
            </div>
            <audio controls autoplay loop>
                <source src="../../resources/01.mp3" type="audio/mpeg" >
            </audio>
        </div>
                </th>
            </tr>
        </table>
         
        <script>
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = 1000;
            canvas.height = 480;
            document.body.appendChild(canvas);

            var bgReady = false;
            var bgImage = new Image();
            bgImage.onload = function () {bgReady = true;};
            bgImage.src = "images/background.png";

            var zdReady = false;
            var zdImage = new Image();
            zdImage.onload = function () {zdReady = true;};
            zdImage.src = "images/zd.png";

            var heroReady = false;
            var heroImage = new Image();
            heroImage.onload = function () {heroReady = true;};
            heroImage.src = "images/hero.png";

            var monsterReady = false;
            var monsterImage = new Image();
            monsterImage.onload = function () {monsterReady = true;};
            monsterImage.src = "images/monster.png";

            var monsterReady2 = false;
            var monsterImage2 = new Image();
            monsterImage2.onload = function () {monsterReady2 = true;};
            monsterImage2.src = "images/monster2.png";
            var hero = { speed: 256 ,x: 670,y: 240};

            var monster = {i:1, k:1,f:1,pz:1};
            var monster2 = {x:450,y:30,i:1};
            var zd = {x:-100,y:0,i:1};
            var monstersCaught = 0;
            var sibai=3;

            var keysDown = {};

            addEventListener("keydown", function (e) {keysDown[e.keyCode] = true;}, false);

            addEventListener("keyup", function (e) {delete keysDown[e.keyCode];}, false);

            var reset = function () 
            {
                monster.i=monster.i*(-1);
                monster.x = 450 + (Math.random() * (400));
                monster.y =20+(Math.random() * (80));
            };

            var update = function (modifier) 
            {
        	if (38 in keysDown) 
                { 
                    hero.y -= hero.speed * modifier;
                }
                if (40 in keysDown) 
                {
                    hero.y += hero.speed * modifier;
                }
                if (37 in keysDown) 
                { 
                    hero.x -= hero.speed * modifier;
                }
                if (39 in keysDown)
                { 
                    hero.x += hero.speed * modifier;
                }
                if (32 in keysDown)
                { 
                    if(zd.i===1)
                    {
                        zd.x=hero.x;
                        zd.y=hero.y;
                        zd.i=0;
                    }
                    
                }
                if(monster.y>440)
                {
                     monster.x = 432 + (Math.random() * (400));
                     monster.y = 30;
                    
                     monster.i=monster.i*(-1);
                     --sibai;
                }
                else
                {
                    monster.y+=monster.f;
                    monster.x+=monster.i; 
                    monster.k++;
                    if(monster.k%150<=50)
                    {
                         monster.i=monster.i*(-1);
                         monster.k+=monster.y;
                    }
                   
                }
                
                
                
                if(monster2.y>440)
                {
                    monster2.x=450 + (Math.random() * (400));
                    monster2.y=60;
                }
                else
                {
                     monster2.y+=monster.f;
                    monster2.x+=monster2.i;
                    if(monster.k%200<=60)
                    {
                         monster2.i=monster2.i*(-1);
                    }
                }
              
              
              
                if( monster.x<=440||monster.x>=850)
                {                
                     monster.i=monster.i*(-1);
                }
                if( monster2.x<=440||monster2.x>=850)
                {                
                     monster2.i=monster2.i*(-1);
                }
                if ( hero.x <= (monster.x + 160)
		&& monster.x <= (hero.x + 160)
		&& hero.y <= (monster.y + 160)
		&& monster.y <= (hero.y + 160)
                &&monster.k%200<=10 ) 
               {
                    monster.i=monster.i*(-1);
                }
                 if ( hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32) ) 
               {
                       ++monstersCaught;
                        monster.pz=0;
                	reset();
                }
                if ( hero.x <= (monster2.x + 32)
		&& monster2.x <= (hero.x + 32)
		&& hero.y <= (monster2.y + 32)
		&& monster2.y <= (hero.y + 32) ) 
               {
                        sibai--;
                	monster2.x=500;
                        monster2.y=60;
                }
                if ( monster2.x <= (zd.x + 30)
		&& zd.x <= (monster2.x + 30)
		&& monster2.y <= (zd.y + 30)
		&& zd.y <= (monster2.y + 30) ) 
               {
                        monstersCaught=monstersCaught+5;
                        monster.pz===0;
                	monster2.x=500;
                        monster2.y=60;
                        zd.x=-100;
                        zd.i=1;
                }
                if ( monster.x <= (zd.x + 30)
		&& zd.x <= (monster.x + 30)
		&& monster.y <= (zd.y + 30)
		&& zd.y <= (monster.y + 30) ) 
               {
                        ++monstersCaught;
                        monster.pz=0;
                	reset();
                        zd.x=-100;
                        zd.i=1;
                }
                if( monstersCaught%5===0&& monster.pz===0)
                {
                     monster.f+=0.5;
                     monster.pz=1;
                }
                
            };

            var render = function ()
            {
                if(sibai===0)
                {
                     ctx.fillText("失败", 600,200);
                     ctx.fillText("分数: " + monstersCaught,600,250);
                }
                else
                {
                    if (bgReady)
                    {
                        ctx.drawImage(bgImage, 380, 0);
                    }
                    if (zdReady)
                    {
                        ctx.drawImage(zdImage, zd.x, zd.y);
                    }
                    if (heroReady)
                    {
                        ctx.drawImage(heroImage, hero.x, hero.y);
                    }

                    if (monsterReady)
                    {
                       ctx.drawImage(monsterImage, monster.x, monster.y);
                    }
                    if (monsterReady)
                    {
                       ctx.drawImage(monsterImage2, monster2.x, monster2.y);
                    }
                   
                     ctx.fillText("分数: " + monstersCaught+"  生命："+sibai, 420,0,450,0);
                }
                
                

                ctx.fillStyle = "rgb(250, 250, 250)";
                ctx.font = "24px Helvetica";
                ctx.textAlign = "left";
                ctx.textBaseline = "top";
               
            };

            var main = function ()
            {
                 var now = Date.now();
                 var delta = now - then;

                 update(delta / 1000);
                 render();

                 then = now;
                if(sibai!==0)
                requestAnimationFrame(main);
                
            };

            var w = window;
            requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

            var then = Date.now();
            reset();
            main();
        </script>
        <table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <th   valign="middle" bgcolor="yellow">
                    <a href="fujian/操作说明.html">操作说明</a>
                </th>
                 <th   valign="middle" bgcolor="#66FF00">
                    <a href="fujian/游戏玩法.html">游戏玩法</a>
                </th>
                <th  valign="middle" bgcolor="yellow">
                    <a href="fujian/作者信息.html">作者信息</a>
                </th>
                 <th  valign="middle" bgcolor="#66FF00">
                    <a href="https://blog.csdn.net/yanyiping992/article/details/80129826">相关游戏</a>
                </th>
                 <th  valign="middle" bgcolor="yellow">
                    <a href="https://github.com/lostdecade/simple_canvas_game">致谢</a>
                </th>
            </tr>
        </table>
    </body>
</html>